<template>
    <div class="pageTitle">交班记录</div>
    <el-form class="search-form" inline :model="searchForm">
        <div>
            <!-- <el-form-item class="search-form-item" label="桌台号:">
                <el-input v-model="searchForm.roomName" placeholder="请选择桌台号" @click="allTableSelectShow = true" clearable />
            </el-form-item> -->
            <el-form-item class="search-form-item" label="营业时间:">
                <!-- <el-date-picker v-model="searchForm.operDate" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable/> -->
                    <el-date-picker v-model="searchForm.operDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item class="search-form-item" label="操作人:">
                <el-select v-model="WaiterItem" placeholder="请选择" value-key="userCode" clear-icon=".elSelect" class="waiterItem">
                <el-option
                    v-for="item in WaiterList"
                    :key="item.userCode"
                    :label="item.userName"
                    :value="item"
                ></el-option>
            </el-select>
            </el-form-item>

            <el-form-item class="action-btn-box">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                <el-button class="reset-btn" @click="router.back()">返回</el-button>
            </el-form-item>
        </div>
    </el-form>
    <div class="table-box">
        <el-table :data="tableData.data" stripe v-loading="loading">
            <el-table-column prop="businessBeginTime" label="营业日期" min-width="10%" />
            <el-table-column prop="shiftsBeginTime" label="交班开始时间" min-width="10%" />
            <el-table-column prop="shiftsEndTime" label="交班结束时间" min-width="8%" />
            <!-- <el-table-column prop="zsje" label="赠送金额" min-width="8%">
                <template #default="scope">
                    <span class="color-FF6A00">{{ scope.row.zsje }}</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="consumeCount" label="开台数" min-width="8%" />
            <el-table-column prop="totalAmt" label="本班营业额" min-width="8%" />
            <!-- <el-table-column prop="" label="本班线上收款" min-width="8%" /> -->
            <el-table-column prop="cashAmt" label="本班现金收款" min-width="8%" />
            <el-table-column prop="discountAmt" label="本班优惠总额" min-width="8%" />
            <el-table-column prop="rechargeAmt" label="本班充值总额" min-width="8%" />
            <el-table-column prop="reserveMoney" label="备用金" min-width="8%" />
            <el-table-column prop="shiftsUser" label="交班人" min-width="8%" />
            <el-table-column prop="" label="操作" min-width="16%">
                <template #default="scope">
                    <div style="display: flex; align-items: center; justify-content: space-around; color: #00AAFF;">
                        <div style="cursor: pointer;" @click="tableDetail(scope.row)">查看详情</div>
                        <div style="cursor: pointer;" @click="HandoverPrint(scope.row)">补打交班</div>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="" label="操作" min-width="16%">
                <div style="display: flex; align-items: center; justify-content: space-around; color: #00AAFF;">
                    <div style="cursor: pointer;" @click="tableDetail()">查看详情</div>
                    <div style="cursor: pointer;">补打交班</div>
                </div>
            </el-table-column> -->
        </el-table>
    </div>
    <div class="pagination-box">
        <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="tableData.totalCount" :current-page="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable" />
</template>
  
<script setup>
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import { getLocalIPv4 } from "@/utils/getip.js"; 
import Api from '@/api'
const router = useRouter()

//获取ip地址
const ip = ref("");
getLocalIPv4().then((ipAddress) => { 
    ip.value = ipAddress;  
}).catch((error) => { 
    console.error("发生错误:", error); 
});

const HandoverPrint = (row) => { 
    Api.Common.PcObjProcess.Do({functionName:"HandoverPrint",contentData: {handoverStartDate: row.businessBeginTime,handoverEndDate: row.shiftsEndTime, ip: ip.value}}).then(res => {
        // console.log(res)
        ElNotification({title: '提示',message: "打印成功", type: 'success'});
    })
}
const tableDetail = (row) => {
    console.log(row)
    Api.Common.PcObjProcess.Do({functionName:"GetShiftsDetail",contentData: {shiftsCode: row.code}})
    .then(res => {
        console.log(res)
        router.push({
            path: '/shiftsDuty',
            query: {
                ShiftsDetail: JSON.stringify(res)
            }
        })
    })
}
// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
    if (data.name) {
        console.log(data);
        searchForm.value.roomCode = data.code
        searchForm.value.roomName = data.name
        allTableSelectShow.value = false
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }

}

// 获取服务员
const WaiterItem = ref('')
const WaiterList = ref([])

const getWaiterList = () => {
    Api.Common.PcObjProcess.Do({"functionName":"getWaiterList","contentData":""})
    .then(res=>{
        console.log(res.result)
        WaiterList.value = res.result
        // WaiterItem.value = WaiterList.value[0].userName
    })
}

let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    console.log(val)
    currentPage.value = val
    getTableData()
}
const getToday = () => {
    let date = new Date()
    const year = date.getFullYear().toString();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    searchForm.value.operDate = year+'-'+month+'-'+day
}
const getTableData = () => {
    let contentData = {
        // businessBeginTime: Begin,
        // businessEndTime: End,
        businessDate: searchForm.value.operDate,
        shiftsUser: WaiterItem.value.userCode,
        pageSize: '9',
        pageIndex: currentPage.value
    }
    
    Api.Common.PcObjProcess.Do({"functionName":"GetShiftsRecordList",contentData})
    .then(res => {
        console.log('查询订单table res :>> ', res);
        tableData.value = res
    })
}
getToday()
getTableData()
getWaiterList() 
// 点击网上支付查询
const handleSearchPay = (params) => {

}

// 点击查看明细
const handleDetail = (params) => {

}

// 点击复台
const handleRe = (params) => {

}

</script>
  
<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
// .app-container {}
.pageTitle{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 48px;
            }
            .el-form-item__content{
                height: 48px;
                padding: 0;
                align-items: flex-start;
            }
            .el-date-editor {
                width: 350px;

            }

            .el-input {
                width: 220px;
            }

            .el-input__wrapper {
                height: 48px;
                background: #ffffff;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 220px;
                height: 48px;
                background: #ffffff;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 48px;
            line-height: 48px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;
    min-height: 600px;
    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }

        .cell{
            text-align: center;
        }
        .el-table .cell{
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    display: flex;
    align-items: center;
    justify-content: center;
    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}
</style>
  